<template>
    <el-dialog v-model="visible" title="课程时间表" width="500" :before-close="handleClose">


        <el-table :data="sessionList" style="width: 100%" :stripe="true">
            <el-table-column label="开始" prop="start_time" />
            <el-table-column label="结束" prop="end_time" />
            <el-table-column label="星期" prop="weekday" />
            <el-table-column label="教室" prop="classroom" />
            <el-table-column label="操作" prop="opt" v-if="role=='admin'">
                <template #default="{ row, column, $index }">
                    <el-button type="danger" @click="handleDeleteSession(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="new-session-form" v-if="role=='admin'">
            <el-input-number v-model="newSession.start_time" controls-position="right" placeholder="开始节"
                style="width: 100px;" />
            <el-input-number v-model="newSession.end_time" controls-position="right" placeholder="结束节"
                style="width: 100px;" />
            <el-input-number v-model="newSession.weekday" controls-position="right" placeholder="星期"
                style="width: 100px;" />
            <el-input v-model="newSession.classroom" placeholder="教室" style="width: 100px;" />
            <el-button type="success" @click="addSession()" style="width:100px">新增</el-button>
        </div>

    </el-dialog>
</template>

<script lang="ts" setup>
import { toRefs, defineProps, reactive, onMounted,ref } from 'vue';
import { ElMessage } from 'element-plus';
import { insertSession, deleteSession } from '@/api/index';
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    sessionList: {
        type: Array,
        required: true,
    },
    handleClose: {
        type: Function,
        required: true,
    },
    tc_id: {
        type: Number,
        required: true,
    }
});
let newSession = reactive({
    start_time: 0,
    end_time: 0,
    weekday: '',
    classroom: '',
    tc_id: 0,
});
let { visible, sessionList, handleClose, tc_id } = toRefs(props);
let role=ref('');
onMounted(() => {
    role.value=localStorage.getItem('vuems_role');
});
const addSession = () => {
    if (!newSession.start_time || !newSession.end_time || !newSession.weekday || !newSession.classroom) {
        ElMessage.error('请填写完整信息');
        return;
    }
    if (tc_id.value == 0) {
        ElMessage.error('请先保存课程信息');
        return;

    }
    newSession.tc_id = tc_id.value;
    insertSession(newSession).then(res => {
        ElMessage.success('新增成功');
        sessionList.value.push(newSession);
        newSession = {
            start_time: 0,
            end_time: 0,
            weekday: '',
            classroom: '',
            tc_id: 0,
        };
    }).catch(err => {
        ElMessage.error('新增失败');
    });
};

const handleDeleteSession = (row) => {
    console.log(row)
    deleteSession(row.session_id).then(res => {
        ElMessage.success('删除成功'); 
        for (let i = 0; i < sessionList.value.length; i++) {
            if(sessionList.value[i].session_id == row.session_id){
                sessionList.value.splice(i, 1);
            }
        }

    }).catch(err => {
        ElMessage.error('删除失败');
    });
};
</script>

<style>
.new-session-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.new-session-form .el-input {
    margin-right: 10px;
}

.new-session-form .el-button {
    margin-right: 10px;
}
</style>